<template>
    <div :class="{rightContent:true,margin:show}">
        <div class="top cf">
            <div class="btn" @click="showAndHidden">
                <i v-if="show" class="el-icon-s-unfold icon"></i>
                <i v-else class="el-icon-s-fold icon"></i>
            </div>
            <div class="path cf">
                <a href="###">{{"首页"}}</a>
                <span style="margin: 0 9px">{{"/"}}</span>
                <span :class="{over:getValue==''}">{{getKey}}</span>
                <span style="margin: 0 9px" :class="{hidden:getValue==''}">{{"/"}}</span>
                <span style="color: #97A8BE">{{getValue}}</span>
            </div>
        </div>

        <div class="wrap"></div>

        <div class="bottom">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RightContentView",
        data(){
            return{
                show:false,
            }
        },
        methods:{
            showAndHidden(){
                this.show = !this.show;
                console.log(this.show);
                this.$emit("menuChange",this.show)
            },
        },
        props:["getKey","getValue"],

    }
</script>

<style scoped>
    .margin{
        margin-left: 65px !important;
    }
    .rightContent{
        padding-left: 15px;
        /*background-color: yellowgreen;*/
        height: 1000px;
        margin-left: 195px;
        transition: margin-left 300ms;
    }
    @media only screen and (max-width:800px) {
        .rightContent{
            margin-left: 0;
        }
    }
    .btn{
        width: 20px;
        height: 50px;
        padding: 0 15px;
        float: left;

    }
    .btn i{
        width: 20px;
        font-size: 20px;
        line-height: 50px;
        position: absolute;
    }
    .path{
        font-size: 14px;
        color: #303113;
        float: left;
        line-height: 50px;
    }
    .path a{
        color: #303113;
    }
    .path a:hover{
        color: #1890FF;
    }
    .path span:nth-of-type(2):hover{
        color: #1890FF;
    }
    .over{
        color: #97A8BE;
    }
    .over:hover{
        color: #97A8BE!important;
    }
    .hidden{
        opacity: 0;
    }
    .wrap{
        height: 35px;
        background-color: lightsalmon;
        box-shadow: 0 2px 1px 2px rgba(0,0,0,0.2);
    }

</style>